<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <link rel="stylesheet" href="./css/huacommon.css" />
    <link rel="stylesheet" href="./css/huaindex.css" />
  </head>
  <body>
    <div class="container" style="margin-bottom: 50px;">
      <div class="header">
        <span>美图秀秀</span>
        <!-- <span>100天</span> -->
      </div>
      <div class="camera-preview">
        <img id="carousel-image" src="./imgs/banner1.png" alt="Camera Preview" />
      </div>
      <div class="tools">
        <div style="display: flex; gap: 2%; margin: 2%">
          <button class="tool-button" style="width: 50%; height: 80px">图片美化</button>
          <button class="tool-button" style="width: 50%; height: 80px">相机</button>
        </div>
        <div  style="display: flex; gap: 2%; margin: 2%">
          <button class="tool-button" style="width: 25%; height: 80px">视频剪辑</button>
          <button class="tool-button" style="width: 25%; height: 80px">视频美容</button>
          <button class="tool-button" style="width: 25%; height: 80px">人像美容</button>
          <button class="tool-button" style="width: 25%; height: 80px">贴图</button>
        </div>
      </div>
      <div class="svgs">
        <div class="svgs-item">
          <img src="./svg/相册.svg" alt="" />
          <p>闪传相册</p>
        </div>
        <div class="svgs-item">
          <img src="./svg/高清画质.svg" alt="" />
          <p>画质修复</p>
        </div>
        <div class="svgs-item">
          <img src="./svg/特效.svg" alt="" />
          <p>脑洞特效</p>
        </div>
        <div class="svgs-item">
          <img src="./svg/消除.svg" alt="" />
          <p>AI消除</p>
        </div>
      </div>
      <div class="svgs" id="svgs-container">
        <!-- json渲染 -->
        <!-- <div class="svgs-item">
          <img src="./svg/智能选品.svg" alt="" />
          <p>AI写真</p>
        </div>
        <div class="svgs-item">
          <img src="./svg/抠图（精细化抠图）-copy.svg" alt="" />
          <p>智能抠图</p>
        </div>
        <div class="svgs-item" onclick="window.location.href='./zhengjianzhao.html'">
          <img src="./svg/6-证件照片.svg" alt="" />
          <p>证件照</p>
        </div>
        <div class="svgs-item">
          <img src="./svg/海报模板.svg" alt="" />
          <p>海报模板</p>
        </div> -->
      </div>
      <div class="hot">
        <h3 >热门推荐</好>
        <div class="hot-content" style="margin-top: 10px;">
          <div class="hot-item">
            <img src="./imgs/hot1.png" alt="" />
          </div>
          <div class="hot-item">
            <img src="./imgs/hot2.png" alt="" />
          </div>
          <div class="hot-item">
            <img src="./imgs/hot3.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <!-- Footer  -->
     <footer class="bottom-nav">
      <div class="bootom-active" ><a style="color: #e650b3;" href="./index.html">首页</a></div>
      <div><a href="./tuku.html">图库</a></div>
      <div><a href="#">AI修图</a></div>
      <div><a href="#">设计室</a></div>
      <div><a href="./me.html">我</a></div>
    </footer>
  </body>
  <script src="./js/index.js"></script>
</html>
